<template>
    <div class="main_container">
        <el-row style="height: 40px;line-height: 40px;margin: 10px 20px 25px 20px;">
            <el-col :span="7">
                <span style="font-size: 14px;color: #606266;width: auto;">日期范围：</span>
                <el-date-picker type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" 
                    v-model="dateRange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
                    :picker-options="handleTime" @change="dateChange"
                    placeholder="请选择日期范围" style="width: 240px;" clearable></el-date-picker>
            </el-col>
            <el-col :span="7">
                <span style="font-size: 14px;color: #606266;width: auto;">员工：</span>
                <el-select
                    style="width: 240px;" 
                    v-model="staffName"
                    filterable
                    remote
                    clearable
                    no-data-text="未匹配到此员工"
                    placeholder="请输入姓名"
                    :loading="showLoading"
                    @change="value => handlerPersonChange(value)"
                    :remote-method="(query) => remoteMethodWithHandler(query)">
                    <el-option
                        v-for="item in handlersList"
                        :key="'sale_'+item.id"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="10">
                <div class="btns">
                    <el-button size="small" style="margin-right: 10px;" icon="el-icon-upload2" @click="handleExport">导出</el-button>
                    <el-button size="small" class="btn_primary_color" icon="el-icon-printer" @click="handlePrint">打印</el-button>
                </div>
            </el-col>
        </el-row>

        <div class="common_line"></div>
        <el-table border :data="tableData" style="margin-top: 15px;">
            <el-table-column label="姓名" align="center" prop="username" />
            <!-- <el-table-column label="日期" align="center" prop="inbound" /> -->
            <el-table-column label="迟到" align="center" prop="迟到" />
            <el-table-column label="早退" align="center" prop="早退" />
            <el-table-column label="补卡" align="center" prop="补卡" />
            <el-table-column label="请假" align="center" prop="请假" />
            <el-table-column label="出差" align="center" prop="出差" />
            <el-table-column label="出勤天数" align="center" prop="count_total" />
        </el-table>
    </div>
</template>

<script>
import { attendances } from '@/api/statistics'
import { getUserList } from "@/api/user";

export default {
    name: 'stock',
    data() {
        return {
            showLoading: false,
            params: {
                corp_id: '',
                start_date: '',
                end_date: '',
                order_type: 'customize_date',
                handler_user_id: ''
            },
            dateRange: [],
            handleTime: {
                disabledDate(date) {
                    //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
                    return date.getTime() > Date.now();
                }
            },
            tableData: [],
            handlersList: [],
            staffName: ''
        }
    },
    created() {
        this.params.corp_id = this.$store.state.corpId
        let nowDate = new Date()
        this.params.start_date = nowDate.getFullYear()+'-'+this.add0(nowDate.getMonth()+1)+'-01'
        this.params.end_date = nowDate.getFullYear()+'-'+this.add0(nowDate.getMonth()+1)+'-'+this.add0(nowDate.getDate())
        this.getData()
    },
    methods: {
        // 补零
        add0(num) {
            if (parseInt(num) < 10){
                num = '0'+ num
            }
            return num
        },
        // 获取数据
        getData() {
            var that = this
            attendances(that.params).then(res => {
                that.tableData = res.data.data
            })
        },
        dateChange(value) {
            if(value && value.length){
                this.params.start_date = value[0]
                this.params.end_date = value[1]
                this.params.order_type = 'customize_date'
            }else{
                this.params.start_date = this.params.end_date = null
                this.params.order_type = ''
            }
            this.getData()
        },
        // 导出
        handleExport() {

        },
        // 打印
        handlePrint() {

        },
        // 选择经办人
        handlerPersonChange(value) {
            if (value){
                let [ id, username ] = value.split('&&')
                this.params.handler_user_id = id
                this.staffName = username
            }else{
                this.params.handler_user_id = ''
                this.staffName = ''
            }
            this.getData()
        },
        remoteMethodWithHandler(query) {
            if (query !== '') {
                this.showLoading = true
                getUserList({
                    corp: this.params.corp_id,
                    username: query
                }).then(res => {
                    this.showLoading = false
                    this.handlersList = res.data.users.filter(item => {
                        item.label = item.username
                        item.value = item.id+'&&'+item.username
                        if (item.phone_no){
                            item.label += ('（'+item.phone_no+'）')
                        }
                        return item
                    });
                })
            } else {
                this.handlersList = []
            }
        },
    }
}
</script>

<style lang="less" scoped>
    @import '../../style/mixin.less';
    .btns {
        float: right;
        height: 40px;
        display: flex;
        align-items: center;
        padding-right: 20px;
    }
    .flex_div {
        display: flex;
        flex-direction: column;
        align-items: center;
        .top_title {
            font-size: 14px;
            color: #606266;
            margin-bottom: 14px;
        }
        .money {
            font-size: 22px;
            font-weight: bold;
            // color: red;
            &::before {
                content: '￥';
                font-size: 14px;
            }
        }
        .order {
            &::before {
                content: '';
            } 
        }
        .red {
            color: red;
        }
        .green {
            color: @blue;
        }
    }
    .customer_name {
        cursor: pointer;
        &:hover {
            color: red;
        }
    }
</style>